// 事件委托  获取父元素
const containerBox = document.querySelector('.demo_box');
console.log(containerBox);
let source;//定义source ，用于拿到节点


//点击button，在页面上创建一个盒子。
document.querySelector('button').onclick = function () {
  // 获取div元素
  var div = document.getElementById('ab');

  //创建节点 节点标签为 div
  var divChild = document.createElement('div');
  divChild.innerHTML = '';
  // 给创建的div添加自定义属性
  divChild.setAttribute("data-drop", "copy");
  // 添加类名
  divChild.classList.add("aaa");

  div.appendChild(divChild);
}


// 拖拽开始 执行一次
containerBox.ondragstart = (e) => {
  console.log("e", e);
  console.log("start", e.target);
  // e.target.dataset.effect==copy
  console.log("e.target.dataset.effect", e.target.dataset.effect);
  // console.log("mmm",e.dataTransfer.effectAllowed);
  e.dataTransfer.effectAllowed = e.target.dataset.effect;
  // 拿到节点
  source = e.target;
};

// 拖拽经过 一直执行，类似Mousemove事件
containerBox.ondragover = (e) => {
  // console.log("over", e.target);
  //  阻止默认行为
  e.preventDefault();
};

// 删除原始类名，添加新类名
function claerStyle(e) {
  if (e) {
    e.target.classList.remove("aaa");
    e.target.classList.add("aaa1");
  }

}
// 判断父元素
function getDropNode(node) {
  console.log("node", node);
  console.log("node.dataset", node.dataset);
  while (node) {
    if (node.dataset && node.dataset.drop) {
      return node;
    }
    // console.log("node.parentNode",node.parentNode);
    node = node.parentNode;
  }
}


// 拖拽放手 执行一次
containerBox.ondrop = (e) => {
  console.log("drop", e.target);
  claerStyle(e);
  const dropNode = getDropNode(e.target);
  if (dropNode && dropNode.dataset.drop === e.dataTransfer.effectAllowed) {
    //如果相等 表示该节点能够接受目前拖拽的节点
    // 分为两种情况
    if (dropNode.dataset.drop === "copy") {
      dropNode.innerHTML = '';
      // 克隆元素 source是上面拿到的元素
      const cloned = source.cloneNode(true);
      cloned.dataset.effect = "move";
      // 添加克隆的元素
      dropNode.appendChild(cloned);
    }
    else {
      source.remove();
    }
  }
};